<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>队列管理页面</title>
    <link type="text/css" rel="stylesheet" href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>'/>
    <link type="text/css" rel="stylesheet" href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>'/>
    <link type="text/css" rel="stylesheet" href='<spring:url value="/resources/css/content.css"/>'/>
    <script src='<spring:url value="/webjars/jquery/1.11.1/jquery.min.js"/>'></script>
    <script src='<spring:url value="/webjars/bootstrap/3.3.5/js/bootstrap.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular.min.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular-resource.js"/>'></script>
    <script src='<spring:url value="/webjars/bootbox/4.4.0/bootbox.js"/>'></script>
    <script src='<spring:url value="/resources/js/common/pageUtil.js"/>'></script>
    <script src='<spring:url value="/resources/js/userQueue/UserQueueModel.js"/>'></script>
    <script src='<spring:url value="/resources/js/userQueue/UserQueueService.js"/>'></script>
    <script src='<spring:url value="/resources/js/userQueue/UserQueueController.js"/>'></script>
</head>

<body ng-app="usrQueueApp" ng-controller="usrQueueCtrl" style="padding: 0px;margin: 0px">
<div class="adcc-container">
    <ol class="breadcrumb">
        <li class="active">MQ管理</li>
        <li class="active">消息队列</li>
    </ol>
    <form class="form-inline">
        <div class="input-group">
            <input type="text" class="form-control" id="queueName" ng_model='searchName' placeholder="名称">
        </div>
        <button type="submit" ng-click="findByConditions()" class="btn btn-primary">查询</button>
        <button type="button" style="float: right;margin-left:3px" class="btn btn-info" ng-click="getSynQueue()">同步</button>
        <button type="button" style="float: right" class="btn btn-success" ng-click="createQueue()">新增</button>
    </form>
    <div style="overflow: auto;overflow-y: hidden">
        <table class="table table-bordered table-striped table-condensed table-hover">
            <thead>
            <tr>
                <th>名称</th>
                <th>持久化</th>
                <th>队列深度</th>
                <th>消息长度</th>
                <th>创建时间</th>
                <th>状态</th>
                <th>生效</th>
                <th>编辑</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="queue in queues">
                <td style="vertical-align: middle;width: 25%">{{ queue.name }}</td>
                <td style="vertical-align: middle;width: 12.5%">{{ queue.persistent ? '持久化' : '非持久化'}}</td>
                <td style="vertical-align: middle;width: 12.5%">{{ queue.maxDepth }}</td>
                <td style="vertical-align: middle;width: 12.5%">{{ queue.maxMsgLength }}</td>
                <td style="vertical-align: middle;width: 12.5%">{{ queue.createTime }}</td>
                <td style="vertical-align: middle;width: 5.5%">{{ queue.enable ? '生效' : '失效'}}</td>
                <td style="vertical-align: middle;width: 6.5%">
                    <button ng-if="queue.enable" class="btn btn-warning btn-xs" ng-click="onDisable(queue)">
                        <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;失效
                    </button>
                    <button ng-if="!queue.enable" class="btn btn-primary btn-xs" ng-click="onEnable(queue)">
                        <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;生效
                    </button>
                </td>
                <td style="vertical-align: middle;width: 6.5%">
                    <button class="btn btn-info btn-xs" ng-click="updateQueue(queue)">
                        <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;修改
                    </button>
                </td>
                <td style="vertical-align: middle;width: 6.5%">
                    <button class="btn btn-danger btn-xs" ng-click="deleteQueue(queue)">
                        <span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;删除
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <nav style="margin-top: 20px" class="form-inline">
        <ul class="pagination">
            <li id="top" class="input-group">
                <a ng-click="firstPage()">
                    <span>首页</span>
                </a>
            </li>
            <li id="previous" class="input-group">
                <a ng-click="previous()">
                    <span>上一页</span>
                </a>
            </li>
            <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" class="input-group">
                <a ng-click="selectCurrentPage(page)" class="form-control">{{ page }}</a>
            </li>
            <li id="next" class="input-group">
                <a ng-click="next()">
                    <span>下一页</span>
                </a>
            </li>
            <li id="bottom" class="input-group">
                <a ng-click="lastPage()">
                    <span>尾页</span>
                </a>
            </li>
            <li class="input-group">
                <%--可设置默认条数--%>
                <select ng-model="selectPageSize" style="height: 34px;" class="form-control"
                        ng-init="selectPageSize='10'"
                        ng-change="changePageSize(selectPageSize)">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </li>
        </ul>
    </nav>
</div>

<%--新增弹框--%>
<div class="modal fade" id="dialogQueue" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 100px;overflow-y: auto" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>{{title}}</h4>
            </div>
            <div class="modal-body">
                <form name="frmQueue" id="frmQueue" method="post">
                    <small class="error" ng-show="frmQueue.update.$error.enable"><span class="font-style"></span></small>
                    <div class="form-group">
                        <label for="name">名称</label>&nbsp;&nbsp;(队列名称格式要求：以Q.U_开头，名称可以包含字母、数字、下划线)
                        <input type="hidden" id="id" name="id" ng-model="queue.id">
                        <input type="text" class="form-control" id="name" name="name"  ng-model="queue.name" required placeholder="请输入队列名称" ng-keyup="checkQueueNameLength(queue.name)" ng-blur="checkQueueName(queue.name)">
                        <div class="error" ng-show="frmQueue.name.$dirty && frmQueue.name.$invalid">
                            <small class="error" ng-show="frmQueue.name.$error.length"><span class="font-style">输入队列名称长度超过48个字符</span></small>
                            <small class="error" ng-show="frmQueue.name.$error.pattern"><span class="font-style">输入队列名称不合法</span></small>
                            <small class="error" ng-show="frmQueue.name.$error.unique"><span class="font-style">输入队列名称已存在</span></small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>优先级</label>
                        <select class="form-control" ng-model="queue.priority" ng-init="queue.priority='0'">
                            <option value='0'>0</option>
                            <option value='1'>1</option>
                            <option value='2'>2</option>
                            <option value='3'>3</option>
                            <option value='4'>4</option>
                            <option value='5'>5</option>
                            <option value='6'>6</option>
                            <option value='7'>7</option>
                            <option value='8'>8</option>
                            <option value='9'>9</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>持久化</label>
                        <select class="form-control" ng-model="queue.persistent" ng-init="queue.persistent='0'">
                            <option value='0'>非持久化</option>
                            <option value='1'>持久化</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="maxDepth">最大队列深度</label>
                        <input type="number" name="maxDepth" id="maxDepth" class="form-control" ng-model="queue.maxDepth" required ng-init="queue.maxDepth=5000" ng-maxlength="9" ng-pattern="/^(0|[1-9]\d*)$/">
                        <div class="error" ng-show="frmQueue.maxDepth.$dirty && frmQueue.maxDepth.$invalid">
                            <small class="error" ng-show="frmQueue.maxDepth.$error.maxlength"><span class="font-style">数字长度需9位以内</span></small>
                            <small class="error" ng-show="frmQueue.maxDepth.$error.pattern"><span class="font-style">请输入非负整数</span></small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="maxMsgLength">最大消息长度</label>
                        <input type="number" name="maxMsgLength" id="maxMsgLength" class="form-control" ng-model="queue.maxMsgLength" required ng-init="queue.maxMsgLength=4194304" ng-maxlength="9" ng-pattern="/^(0|[1-9]\d*)$/">
                        <div class="error" ng-show="frmQueue.maxMsgLength.$dirty && frmQueue.maxMsgLength.$invalid">
                            <small class="error" ng-show="frmQueue.maxMsgLength.$error.maxlength"><span class="font-style">数字长度需9位以内</span></small>
                            <small class="error" ng-show="frmQueue.maxMsgLength.$error.pattern"><span class="font-style">请输入非负整数</span></small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="retainInterval">保留间隔</label>
                        <input type="number" name="retainInterval" id="retainInterval" class="form-control" ng-model="queue.retainInterval" required ng-init="queue.retainInterval=999999999" ng-maxlength="9" ng-pattern="/^(0|[1-9]\d*)$/">
                        <div class="error" ng-show="frmQueue.retainInterval.$dirty && frmQueue.retainInterval.$invalid">
                            <small class="error" ng-show="frmQueue.retainInterval.$error.maxlength"><span class="font-style">数字长度需9位以内</span></small>
                            <small class="error" ng-show="frmQueue.retainInterval.$error.pattern"><span class="font-style">请输入非负整数</span></small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-md-offset-9">
                            <button id="btnQueueSave" name="btnQueueSave"  type="submit" ng-disabled="frmQueue.$invalid" ng-click="save(queue)" class="btn btn-primary">保存</button>
                            <button id="btnQueueCancel" name="btnQueueCancel" type="button" ng-click="cancel()" class="btn btn-danger">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<%--同步管理框--%>
<div class="modal fade bs-example-modal-lg" id="dialogSyncQueue" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     style="margin-top: 100px" data-backdrop="static" style="width: 1280px">
    <div class="modal-dialog modal-dialog modal-lg" role="document" style="width: 1280px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>队列同步
                </h4>
            </div>
            <div class="modal-body">
                <div style="height: 420px;border:1px solid #ccc;overflow: auto;">
                    <div style="border:1px solid #ccc;margin: 10px;height: 200px;pxoverflow: auto">
                        <table class="table">
                            <tr>
                                <th style="width:100px;"><input type="checkbox" ng-model="selectNewQueueAll" id="selectNewQueueAll"></th>
                                <th style="width:150px;">新增队列</th>
                                <th>备注</th>
                                <th></th>
                            </tr>
                            <tr  ng-repeat="x in newQueue">
                                <td><input type="checkbox"  ng-checked="selectNewQueueAll" name="addQueueList" value="{{x}}"></td>
                                <td>{{x.name}}</td>
                                <td></td>
                                <td>
                                    <input type="hidden" name="type" value="{{x.type}}">
                                    <input type="hidden" name="priority" value="{{x.priority}}">
                                    <input type="hidden" name="persistent" value="{{x.persistent}}">
                                    <input type="hidden" name="maxDepth" value="{{x.maxDepth}}">
                                    <input type="hidden" name="maxMsgLength" value="{{x.maxMsgLength}}">
                                    <input type="hidden" name="retainInterval" value="{{x.retainInterval}}">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div style="border:1px solid #ccc;margin: 10px;height: 200px;overflow: auto;">
                        <table class="table">
                            <tr>
                                <th style="width:100px;"><input type="checkbox" ng-model="selectDiffQueueAll" id="selectDiffQueueAll"></th>
                                <th style="width:150px;">变更队列</th>
                                <th>备注</th>
                                <th></th>
                            </tr>
                            <tr  ng-repeat="x in diffQueue">
                                <td><input type="checkbox"  ng-checked="selectDiffQueueAll" name="updateQueueList" value="{{x}}"></td>
                                <td>{{x.name}}</td>
                                <td>{{x.compareResult}}</td>
                                <td>
                                    <input type="hidden" name="type" value="{{x.type}}">
                                    <input type="hidden" name="priority" value="{{x.priority}}">
                                    <input type="hidden" name="persistent" value="{{x.persistent}}">
                                    <input type="hidden" name="maxDepth" value="{{x.maxDepth}}">
                                    <input type="hidden" name="maxMsgLength" value="{{x.maxMsgLength}}">
                                    <input type="hidden" name="retainInterval" value="{{x.retainInterval}}">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="row" style="margin-top: 20px">
                    <div class="col-md-3 col-md-offset-9">
                        <button type="submit" ng-click="synQueue()" class="btn btn-primary">确定</button>
                        <button type="button" ng-click="cancel()" class="btn btn-warning">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
